#define IMU_HTML \
"\
<!DOCTYPE html>\
<html>\
<head>\
  <title>Device Orientation Example</title>\
  <style>\
    #data {\
      font-size: 20px;\
      margin-bottom: 20px;\
    }\
    canvas {\
      display: block;\
      margin: 0 auto;\
    }\
  </style>\
  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js\"></script>\
</head>\
<body>\
  <h1>Device Orientation Example</h1>\
  <div id=\"data\">Waiting for data...</div>\
  <button id=\"enable-sensors\">Enable Sensors</button>\
  <div id=\"container\"></div>\
\
  <script>\
    var scene = new THREE.Scene();\
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\
    var renderer = new THREE.WebGLRenderer();\
    renderer.setSize(window.innerWidth, window.innerHeight);\
    document.body.appendChild(renderer.domElement);\
\
    var geometry = new THREE.BoxGeometry(1, 1, 1);\
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });\
    var cube = new THREE.Mesh(geometry, material);\
    scene.add(cube);\
\
    var arrowX = new THREE.ArrowHelper(new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 0, 0), 2, 0xff0000); /* 红色表示 X 轴 */\
    var arrowY = new THREE.ArrowHelper(new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 0), 2, 0x00ff00); /* 绿色表示 Y 轴 */\
    var arrowZ = new THREE.ArrowHelper(new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, 0), 2, 0x0000ff); /* 蓝色表示 Z 轴 */\
    scene.add(arrowX);\
    scene.add(arrowY);\
    scene.add(arrowZ);\
\
    camera.position.z = 5;\
\
    function animate() {\
      requestAnimationFrame(animate);\
      renderer.render(scene, camera);\
    }\
    animate();\
\
    var xhttp = new XMLHttpRequest();\
    function controlSolve(code) {\
      xhttp.open('GET', './imu_solve?ctrl_code=' + code, true);\
      xhttp.send();\
    }\
\
    document.getElementById('enable-sensors').addEventListener('click', function () {\
      if (typeof DeviceOrientationEvent.requestPermission === 'function') {\
        DeviceOrientationEvent.requestPermission()\
          .then(permissionState => {\
            if (permissionState === 'granted') {\
              window.addEventListener('deviceorientation', function (event) {\
                var alpha = event.alpha || 0;\
                var beta = event.beta || 0;\
                var gamma = event.gamma || 0;\
\
                var dataElement = document.getElementById('data');\
                dataElement.innerHTML = 'Alpha: ' + alpha.toFixed(2) + '<br>' +\
                                        'Beta: ' + beta.toFixed(2) + '<br>' +\
                                        'Gamma: ' + gamma.toFixed(2);\
\
                cube.rotation.x = THREE.Math.degToRad(beta);\
                cube.rotation.y = THREE.Math.degToRad(gamma);\
                cube.rotation.z = THREE.Math.degToRad(alpha);\
\
                arrowX.setDirection(new THREE.Vector3(1, 0, 0).applyEuler(cube.rotation));\
                arrowY.setDirection(new THREE.Vector3(0, 1, 0).applyEuler(cube.rotation));\
                arrowZ.setDirection(new THREE.Vector3(0, 0, 1).applyEuler(cube.rotation));\
              });\
\
              /* 每隔 20ms 上传数据 */\
              setInterval(function () {\
                var imuData = { alpha: cube.rotation.z, beta: cube.rotation.x, gamma: cube.rotation.y };\
                controlSolve(`alpha:${cube.rotation.z.toFixed(4)},beta:${cube.rotation.x.toFixed(4)},gamma:${cube.rotation.y.toFixed(4)}`);\
              }, 20);\
            } else {\
              document.getElementById('data').innerHTML = 'Permission denied for Device Orientation.';\
            }\
          })\
          .catch(error => {\
            document.getElementById('data').innerHTML = 'Error requesting permission: ' + error;\
          });\
      } else {\
        document.getElementById('data').innerHTML = 'Device Orientation API is not supported on your browser.';\
      }\
    });\
  </script>\
</body>\
</html>\
"
